<template>
    <nav class="menu-container">
        <RouterLink :exact="item.exact" v-for="item in items" :to="{name:item.name}" :key="item.link"      >
            <div class="icon">
                <Icon :type="item.icon" />
            </div>
            <span>{{ item.title }}</span>
        </RouterLink>
    </nav>
</template>

<script>
import Icon from "@/components/Icon/"
export default {
    components: { Icon },
    data() {
        return {
            items: [
                {
                    name: 'Home',
                    title: '首页',
                    icon: "home",
                    exact: true,
                },
                {
                    name: 'Blog',
                    title: '文章',
                    icon: "blog",
                    exact: false,  // 激活状态是否要精确匹配
                },
                {
                    name: 'About',
                    title: '关于我',
                    icon: "about",
                    exact: true,
                },
                {
                    name: 'Project',
                    title: '项目&效果',
                    icon: "code",
                    exact: true,
                },
                {
                    name: 'Message',
                    title: '留言板',
                    icon: "chat",
                    exact: true,
                }
            ]
        }
    },
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";

.menu-container {
    color: @gray;
    margin: 24px 0;

    a {
        padding: 0 50px;
        display: block;
        display: flex;
        align-items: center;
        height: 45px;

        &.router-link-active {
            background-color: #2d2d2d;
        }

        .icon {
            width: 24px;
        }

        &:hover {
            color: white;
        }
    }

}
</style>